<script setup>
import request from "@/utils/request";
import { ref, onMounted } from 'vue';

const loading = ref(true);
const form = ref({});
const dialogVisible = ref(false);
const search = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const articleList = ref([]);
const vis = ref(false);
const detail = ref({});
const loginUser = ref({});

onMounted(() => {
  const userStr = sessionStorage.getItem("user") || "{}";
  loginUser.value = JSON.parse(userStr);
  console.log("当前登陆者信息：", loginUser.value);
  load();
});

const details = (row) => {
  detail.value = row;
  vis.value = true;
};

const load = () => {
  loading.value = true;
  request.post("/news/getNewsList", {}).then(res => {
    console.log(res);
    articleList.value = res.data;
  });
};
</script>

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="20" :offset="1">
        <el-card v-for="article in articleList" :key="article.id">

          <div slot="header">
            <router-link class="main-text" :to="{ path: '/informationDetail', query: { id: article.id } }">
              <h3>{{ article.title }}</h3>
            </router-link>
            <div class="article-info">
              <p class="text" v-html='article.content'></p>
            </div>
            <i class="el-icon-user-solid article-icon">{{ article.author }}</i>
            <i class="el-icon-date article-icon">{{ article.time }}</i>
          </div>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.item-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.carimg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}

.desc-box {
  position: absolute;
  bottom: 0;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 40px;
  margin-left: -250px;
  margin-top: -20px;
  text-align: center;
}

.el-card {
  margin-top: 20px;
}

.article-info {
  margin-top: 10px;
  color: #909399;
  font-size: 13px;
}

.article-icon,
.article-icon .tag {
  color: #909399;
  font-size: 13px;
  margin-right: 10px;
  text-decoration: none;
}

.article-icon .tag:hover {
  color: #409eff;
  cursor: pointer;
}

.tabloid {
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
}

.text {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
</style>
